<template>
  <a-modal v-model:visible="visible" title="选择小程序用户" width="700px">
    <!-- 搜索条件 -->
    <a-form layout="inline" :model="searchForm" style="padding-bottom: 10px">
      <a-form-item label="查询条件：">
        <a-select placeholder="查询类型" v-model:value="search_type" style="width: 120px" @change="changeSearchType">
          <a-select-option :value="1">名字</a-select-option>
          <a-select-option :value="2">报名类型</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="search_type === 1">
        <a-input placeholder="查询的姓名" v-model:value="searchForm.name" @pressEnter="searchUsers" />
      </a-form-item>
      <a-form-item v-show="search_type === 2">
        <a-input placeholder="报名组别" v-model:value="searchForm.recruitment" @pressEnter="searchUsers" />
      </a-form-item>
      <a-form-item v-show="search_type === 2">
        <a-select placeholder="是否通过" v-model:value="searchForm.pass" style="width: 120px">
          <a-select-option :value="1">通过</a-select-option>
          <a-select-option :value="0">全部</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchUsers">查询</a-button>
      </a-form-item>
    </a-form>
    <!-- 用户列表 -->
    <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="false" :scroll="{ y: '50vh' }" rowKey="id" size="small">
      <template #wx="{ record, text }">
        <a-avatar :src="record.avatar_url" style="margin-right: 5px" />
        {{ text ? text : '' }}
      </template>
    </a-table>
    <template #footer>
      <a-space>
        选择了：
        <span v-for="(name, index) in nameList" :key="index">{{ name }}</span>
        <a-button key="cancel" @click="handleCancel">取消</a-button>
        <a-popconfirm title="确定选择这些同学？" ok-text="是的" cancel-text="取消" :disabled="nameList.length > 0 ? false : true" @confirm="handleOk" @cancel="handleCancel">
          <a-button key="submit" type="primary" :disabled="nameList.length > 0 ? false : true">确定</a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-modal>
</template>
<script lang="ts">
import { message } from 'ant-design-vue'
import { defineComponent, onUpdated, ref, Ref, toRaw } from 'vue'
import { get } from '../utils/request/request'

const columns = [
  {
    title: '微信',
    dataIndex: 'nick_name',
    align: 'center',
    width: '25%',
    ellipsis: true,
    slots: { customRender: 'wx' }
  },
  { title: '姓名', dataIndex: 'name', width: '15%', align: 'center' },
  { title: '班级', dataIndex: 'class_name', width: '20%', align: 'center' },
  { title: '手机号', dataIndex: 'phone', width: '25%', align: 'center' },
  {
    title: '已填问卷',
    dataIndex: 'paper_count',
    width: '15%',
    align: 'center'
  }
]

interface DataItem {
  id: number
  nick_name: string
  name: string
  class_name: string
  phone: string
  app_id: number
  avatar_url: string
  resume_path: string
  paper_count: number
}

interface SearchData {
  name: string
  recruitment: string | undefined
  pass: number | undefined
}

const data: Ref<DataItem[]> = ref([])

// 查询相关
const useSearchEffect = (token: string) => {
  const search_type = ref<number>(1)
  const { getSearchData } = useHttpEffect(token)
  const searchForm: Ref<SearchData> = ref({
    name: '',
    recruitment: undefined,
    pass: 0
  })
  const searchUsers = () => {
    getSearchData(searchForm.value, search_type)
  }
  const changeSearchType = () => {
    searchForm.value = {
      name: '',
      recruitment: undefined,
      pass: 0
    }
  }
  return { search_type, searchForm, searchUsers, changeSearchType }
}

//表格数据
const useTabelEffect = () => {
  const nameList = ref<string[]>([])
  const idList = ref<number[]>([])
  const rowSelection = {
    // type: "radio",
    onSelect: (record: DataItem) => {
      idList.value.push(record.id)
      nameList.value.push(record.name)
      // console.log(record.name,record.id,record.app_id)
    }
  }
  return {
    nameList,
    idList,
    columns,
    rowSelection
  }
}

// 网络请求
const useHttpEffect = (token: string) => {
  const getData = async () => {
    const res: any = await get(`/admin/api/v1/user/list?page=1&limit=7`, token)
    const modifiedData = res.data
    modifiedData.forEach((user: any) => {
      if (!user.name) {
        user.name = '/'
        user.class_name = '/'
        user.phone = '/'
      }
    })
    data.value = modifiedData
  }
  // 搜索
  const getSearchData = async (searchForm: SearchData, search_type: Ref<number>) => {
    if (search_type.value === 1 && searchForm.name) {
      const res: any = await get(`/admin/api/v1/user/list/condition?name=${searchForm.name}`, token)
      console.log(res)
      if (res?.status_code === 0) {
        if (res?.data == null) {
          message.info('该条件下没有用户')
        } else {
          data.value = res?.data
        }
      }
    } else if (search_type.value === 2 && searchForm.recruitment) {
      const res: any = await get(`/admin/api/v1/user/list/condition?recruitment=${searchForm.recruitment}&pass=${searchForm.pass}`, token)
      console.log(res)
      if (res?.status_code === 0) {
        if (res?.data == null) {
          message.info('该条件下没有用户')
        } else {
          data.value = res?.data
        }
      }
    }
  }
  return { getData, getSearchData }
}

// modal相关
const useModalEffect = (idList: Ref<number[]>, emit: any) => {
  const visible = ref<boolean>(false)
  const showModal = () => {
    visible.value = true
  }
  const handleOk = () => {
    if (idList.value) {
      visible.value = false
      emit('chosUser', toRaw(idList.value))
    } else {
      message.warn('您没有选择用户')
    }
  }
  const handleCancel = () => {
    console.log('handleCancel')
  }
  return {
    visible,
    showModal,
    handleOk,
    handleCancel
  }
}

export default defineComponent({
  emits: ['chosUser'],
  props: ['chosTitle'],
  setup(props, { emit }) {
    const token: string = localStorage.getItem('token') as string
    const { search_type, searchForm, searchUsers, changeSearchType } = useSearchEffect(token)
    const { nameList, idList, columns, rowSelection } = useTabelEffect()
    const { visible, showModal, handleOk, handleCancel } = useModalEffect(idList, emit)
    const { getData } = useHttpEffect(token)

    onUpdated(() => {
      if (visible.value) {
        getData()
      }
    })
    return {
      searchForm,
      searchUsers,
      visible,
      showModal,
      handleOk,
      handleCancel,
      nameList,
      idList,
      data,
      columns,
      rowSelection,
      search_type,
      changeSearchType
    }
  }
})
</script>
